<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>超市账单管理系统</title>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="layui/css/layui.css"/>
</head>
<body>
<!--头部-->
    <header class="publicHeader">
        <h1>超市账单管理系统</h1>
        <div class="publicHeaderR">
            <p><span>下午好！</span><span style="color: #fff21b"> Admin</span> , 欢迎你！</p>
            <a href="login.html">退出</a>
        </div>
    </header>
<!--时间-->
    <section class="publicTime">
        <span id="time">2015年1月1日 11:11  星期一</span>
        <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
    </section>
<!--主体内容-->
    <section class="publicMian ">
        <div class="left">
            <h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
            <nav>
                <ul class="list">
                    <li><a href="billList.html">账单管理</a></li>
                    <li><a href="providerList.html">供应商管理</a></li>
                    <li  id="active"><a href="userList.html">用户管理</a></li>
                    <li><a href="password.html">密码修改</a></li>
                    <li><a href="login.html">退出系统</a></li>
                </ul>
            </nav>
        </div>
        <div class="right">
            <div class="location">
                <strong>你现在所在的位置是:</strong>
                <span>用户管理页面</span>
            </div>
            <div class="search">
                <span>用户名：</span>
                <input id="userName" type="text" placeholder="请输入用户名"/>
                <input type="button" id="search2" value="查询"/>
                <a href="userAdd.html">添加用户</a>
            </div>
            <!--用户-->
            <table cellpadding="0" cellspacing="0" class="layui-hide" id="test" lay-filter="test">
                
            </table>

        </div>
    </section>

<footer class="footer">
    版权归北大青鸟
</footer>

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/time.js"></script>
<script src="layui/layui.js"></script>

<script type="text/javascript">
	$(function(){ 
		$("#search2").click(function(){
			var userName = $("#userName").val();
			alert(userName);
			$.ajax({
			  	type:"GET",
				url:"/SSM-1/user/userlist",
				data:{"userName":userName},
				dataType:"JSON",
				success:function(data){
					if(data.success){
						alert("查询成功");
						location.href="userList.html?userName="+userName;
					}else{
						alert("查询失败");
					}
				},
				error:function(data){
					alert("系统异常！");
				}
			 });
		}); 
	});
</script>

<script>
layui.use(['table','layer'], function(){
  var table = layui.table;
  var layer = layui.layer;
  
  table.render({
    elem: '#test'
    ,url:'/SSM-1/user/userlist'
  	,page: true
  	,limit:5    //需要在后端接收这个limit参数，并赋值给pageSize才能用	
  	,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板 
    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
    ,cols: [[
       {type: 'checkbox', fixed: 'left'} //复选框
      ,{field:'id', width:80, title: 'ID', sort: true}
      ,{field:'userName', width:100, title: '用户名'}
      ,{field:'userCode', width:100, title: '用户编码', sort: true}
      ,{field:'address', width:80, title: '地址', width: '20%'}
      ,{field:'age', title: '年龄', width:70,} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
      ,{field:'gender', title: '性别',width:80, sort: true,templet:"#sex"}
      ,{field:'phone', title: '电话', sort: true,width:150}
      ,{field:'userRoleName', title: '职务'}
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
    ]]
  });
  
  //头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
      case 'getCheckData':
        var data = checkStatus.data;
        layer.alert(JSON.stringify(data)); //json对象转换成string
      break;
      case 'getCheckLength':
        var data = checkStatus.data;
        layer.msg('选中了：'+ data.length + ' 个');
      break;
      case 'isAll':
        layer.msg(checkStatus.isAll ? '全选': '未全选');
      break;
    };
  });
  
    //监听行工具事件
  table.on('tool(test)', function(obj){
    var data = obj.data;
    if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
    	location.href="userUpdate.html?id="+data.id;
     
    }else if(obj.event === 'view'){
    	location.href="userView.html?id="+data.id;
    }
  });
});
</script>

<script type="text/html" id="sex">
  {{#  if(d.gender == 1){ }}
    男
  {{#  } else { }}
    女
  {{#  } }}
</script>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="view">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
</html>